<template>
	<div class="upload_box" :class="{'inline':type == 'file'}">
		<template v-if="multiple">
			<div class="demo-upload-list" v-for="(item,index) in fileList" :key="index">
				<img :src="item">
				<div class="demo-upload-list-cover">
					<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
					<Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
				</div>
			</div>
		</template>
		<Upload
		  :class="{'demo-upload-list':type=='img'}"
		  :on-progress="globalLoading"
		  :action="uploadUrl" 
		  :show-upload-list="false"
		  :data="extData"
		  :format="format" 
		  :accept="acceptList"
		  :on-exceeded-size="exceeded"
		  :on-success="handleSuccess">
		  <div class="wl-upload" style="width: 150px;height: 150px;" v-if="type=='img'">
			  <img v-if="fileList.length > 0 && multiple == false && fileList[0].url" :src="fileList[0].url" alt="">
			  <Icon v-else size="100" color="#eee" type="ios-add"  />
		  </div>
		  <Button icon="ios-cloud-upload-outline"  v-if="type=='file'">
			  {{fileList[0].length == 0 ? '上传' : fileList[0]}}
		  </Button>
		</Upload>
		 <Modal title="预览图片" v-model="visible">
			<img :src="view_img" v-if="visible" style="width: 100%">
		</Modal>
	</div>
</template>

<script>
	export default{
		name:'FileUpload',
		data(){
			return{
				extData:{},
				loading:false,
				percent:0,
				view_img:'',
				visible:false,
				acceptList: '.jpg,.jpeg,.png,.gif',
				uploadUrl:'',
			}
		},
		props:{
			multiple:{
				type: Boolean,
				default: false,
			},
			type:{
				type: String,
				default: 'img',
			},
			keyname:{
				type: String,
				default: '',
			},
			fileList:{
				type: Array,
				default: () => {
					return []
				},
			},
			format:{
				type:Array ,
				default: () => {
					return ['jpg','jpeg','png','gif']
				}
			}
		},
		created(){
			this.uploadUrl = this.axios.defaults.baseURL + '../tools/uploads/uploads';
			let accept = '';
			for (var i in this.format) {
				accept += '.' + this.format[i] + ',';
			}
			this.acceptList = accept;
		},
		methods:{
			globalLoading (event) {
				this.$Spin.show({
					render: (h) => {
						return h('div', [
							h('Icon', {
								'class': 'demo-spin-icon-load',
								props: {
									type: 'ios-loading',
									size: 18
								}
							}),
							h('div', '正在上传中...'+this.percent+'%')
						])
					}
				});
				this.percent = parseInt(event.percent);
				if (this.percent == 100) this.$Spin.hide();
			},
			handleView(item){
				this.view_img = item;
				this.visible = true;
			},
			handleRemove(item,index){
				this.fileList.splice(index,1);
				this.$emit('on-remove',item,this.fileList);
			},
			exceeded(){
				this.$Message.error('上传文件大小超出限制');
			},				
			handleSuccess(res){
				var url = res.data.fileurl;
				var urls = res.data.fileurls;
				this.fileList.push({"url":urls});
				this.$emit('on-success',url,urls,this.fileList);
				
				console.log(res);
				if(res.code !=1){
					this.$Message.error(res.msg);
				}
				
			}
		},
		watch: {
			'format': function() {
				let accept = '';
				for (var i in this.format) {
					accept += '.' + this.format[i] + ',';
				}
				this.acceptList = accept;
			}
		}
	}
</script>

<style scoped>
.inline{
	display: inline-block;
}
.demo-spin-icon-load{
	animation: ani-demo-spin 1s linear infinite;
}
.demo-upload-list{
	display: inline-block;
	width: 150px;
	height: 150px;
	text-align: center;
	line-height: 150px;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	position: relative;
	box-shadow: 0 1px 1px rgba(0,0,0,.2);
	margin-right: 10px;
}
.demo-upload-list img{
	width: 100%;
	height: 100%;
}
.demo-upload-list-cover{
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
	display: block;
}
.demo-upload-list-cover i{
	color: #fff;
	font-size: 25px;
	cursor: pointer;
	margin: 0 2px;
}
</style>

